<script lang='ts'>
import { defineComponent, ref } from "vue";
import { DrawUtils } from "../../../../../utils/draw";
import { mapView } from "../../../func/index";
import { QueryTaskSearch } from "../../../func/queryTaskSearch";
import { ElNotification } from "element-plus";
import store from "@/store/index";
export default defineComponent({
  name: "CombinationQuery",
  components: {},
  setup() {
    //图层
    const layers = ref([
      {
        value: "1",
        label: "2019三调地类图斑",
      },
    ]);
    const layer = ref();

    const buffer = ref();

    const spaceRelation = ref();

    //提交表单
    const submitForm = async (form: string) => {
      if (mapView.graphics.length <= 0) {
        openNoticel("请先绘画要查询的区域...");
        return;
      }
      if (spaceRelation.value == null) {
        openNoticel("请选择空间关系，相交还是包含");
        return;
      }
      const _layerURL =
        "http://10.10.24.31:6080/arcgis/rest/services/T_LYXZ/TD_LYXT_SDSJ_BZ_2019_WP/MapServer/0";
      const queryTask = new QueryTaskSearch(mapView, _layerURL, "");
      // contains 包含  intersects 相交
      //spaceRelation为intersects是相交
      const res = await queryTask.queryGraphic(
        spaceRelation.value,
        mapView.graphics.items[0].geometry
      );
      if (res.length > 0) {
        store.dispatch("searchresult/ADD_RESULT", res);
        //打开搜索结果面板
        store.dispatch("searchresult/OPEN_PANEL");
      }
    };
    //警告提醒弹窗
    const openNoticel = (warMeg: string) => {
      ElNotification.error({
        title: "警告",
        message: warMeg,
        position: "bottom-right",
        offset: 200,
      });
    };
    //重置表单
    const resetForm = (form: string) => {};
    //图片工具函数
    const getImageUrl = (name: string) => {
      return new URL(`/src/assets/icon_png/${name}`, import.meta.url).href;
    };
    //选择画的方式，线、面
    const select = (index: any) => {
      selectUtil.value = index;
      console.log("点或者面", index);

      const draw = new DrawUtils(mapView);
      switch (index) {
        case 1:
          draw.drawpolyline();
          break;
        case 2:
          openNoticel("导入坐标查询开发中....");
          break;
        case 3:
          draw.createPolygon();
          break;
        default:
          break;
      }
    };
    //图片工具选中
    const selectUtil = ref();

    return {
      layers,
      layer,
      buffer,
      spaceRelation,
      submitForm,
      resetForm,
      getImageUrl,
      select,
      selectUtil,
    };
  },
});
</script>

<template>
  <div class="combinationquery-page-wrap">
    <div class="page-column"><span>查询图层</span></div>
    <el-select v-model="layer" placeholder="请选择" style="padding: 10px">
      <el-option
        v-for="item in layers"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="page-column"><span>范围设置</span></div>
    <div class="util-group">
      <div @click="select(1)" :class="{ active: selectUtil === 1 }">
        <img :src="getImageUrl('draw.png')" />
      </div>
      <div @click="select(2)" :class="{ active: selectUtil === 2 }">
        <img :src="getImageUrl('import.png')" />
      </div>
      <div @click="select(3)" :class="{ active: selectUtil === 3 }">
        <img :src="getImageUrl('polygon.png')" />
      </div>
    </div>
    <div class="page-column"><span>缓冲设置</span></div>
    <div class="buffer-set">
      <el-input v-model="buffer" placeholder="请输入"></el-input>
    </div>
    <div class="page-column"><span>空间关系设置</span></div>
    <div style="padding: 10px; margin-top: 20px">
      <el-radio-group v-model="spaceRelation" size="small">
        <el-radio :label="'intersects'" border>相交</el-radio>
        <el-radio :label="'contains'" border>包含</el-radio>
      </el-radio-group>
    </div>
    <div class="form-operate">
      <el-button type="primary" @click="submitForm">查询</el-button>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<style lang='less' scoped>
.combinationquery-page-wrap {
  .page-column {
    padding-left: 10px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid #1299f5;

    span {
      color: #1299f5;
    }
  }

  .util-group {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .buffer-set {
    padding: 10px;
  }
  .form-operate {
    padding: 10px;
    display: flex;
    justify-content: end;
  }
}

.active {
  border: 1px solid red;
}
</style>